<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>vue写购物车</title>
<style>
table{
border-collapse: collapse;
}

thead>tr{
border-bottom:2px solid #B7D1FB ;
}

tbody>tr{
border-bottom:1px solid #B7D1FB; 
}

th,
td{
padding: 12px;
}

a{
text-decoration: none;
}
</style>

</head>
<body>
<div id="app">
<h3>vue写购物车</h3>
<table>
<thead>
<tr>
<th>
<input type="checkbox"  id="allab" @click="SelectAll($event)"/>
<label for="allcb">全选</label>
</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>

<tbody>
<tr v-for="good in defaultData">
<td>
	<!-- v-model="good.choose" 双向绑定-->
<input @click="choose(good.id)" v-model="good.choose" type="checkbox"/>
</td>

<td>{{good.name}}</td>
<td>{{good.price}}</td>

<td>
<button @click="minus(good.id)">-</button>
<span>{{good.num}}</span>
<button @click="plus(good.id)">+</button>
</td>
<!-- 保留小数点后2位 -->
<td style="color: red;">{{(good.num*good.price).toFixed(2)}}</td>

<td>
<a href="#" @click="delGood(good.id)">删除</a>
</td>
</tr>

<tr>
<td id="order" colspan="6" style="text-align: right;">
<span>已经选择16件商品总计</span>
<span style="color: red; font-size: 22px;">731.40</span>
<a href="#" style="border-radius: 4px;
padding:8px;
background:#F08B34;color:#fff">提交订单</a>
</td>
</tr>
</tbody>
</table>
</div>

<script>
new Vue({
el:"#app",
data:{
	
defaultData:[{
name:'javaScript实战',
price:40,
num:1
},
{
name:'javaScript实战2代',
price:42,
num:2
},
{
name:'javaScript实战3代',
price:43,
num:3
},

{name:'javaScript实战4代',
price:43,
num:4
},

]
},
//展示数据之前 就预处理数据
created() {
	this.defaultData.forEach((o,i)=>o=Object.
	assign(o,{id:i,
	choose:false
	}))
	console.log(this.defaultData);
},

//自启动 数据？
computed:{
	
},
//点击触发触发 数据？
methods:{
	//删除
	delGood:function(id){
	// data=data.filter(o=>o.id!=i)
		this.defaultData=this.defaultData.filter(o=>o.id!=id);
		// console.log(id);
	},
	//增加
	plus(id){
		 this.defaultData.forEach(o=>o.id==id ? o.num++:{});
		
	},
	//删除
	minus(id){
		this.defaultData.forEach(o=>o.id==id&&o.num>0 ? o.num--:{});
	},
	//选择
	choose(id){
		this.defaultData.forEach(o=>o.choose=o.id==id? !o.choose:o.choose);
	},
	//所有数据
	SelectAll(e){
		this.defaultData.forEach(o=>o.choose=e.target.checked);
		// console.log(this.defaultData);
	}
	
}



})

</script>
</body>
</html>
